import React, { useState } from "react";
import AiTool from "./tabs/AiTool/index";
import Assembly from "./tabs/Assembly/index";
import SourceMaterial from "./tabs/SourceMaterial/index";
import TabBackground from "./tabs/TabBackground/index";
import TabImage from "./tabs/TabImage/index";
import Templateac from "./tabs/Templateac/index";
import Upload from "./tabs/Upload/index";
import WrittenWords from "./tabs/WrittenWords/index";
import "../../../assets/icon/iconfont.css"
import "./style.css"
import { LeftOutlined,RightOutlined } from '@ant-design/icons';


const Index: React.FC = () => {
  type Tab = "tab1" | "tab2" | "tab3" | "tab4" | "tab5" | "tab6" | "tab7" | "tab8";
  const [activeTab, setActiveTab] = useState<Tab>("tab1");
  const handleTabClick = (tab: Tab) => {
    setActiveTab(tab);
  };

  const [isExpanded, setIsExpanded] = useState<boolean>(true);

  const toggleExpand = () => {
    setIsExpanded(prev => !prev);
  };


  return (
    <div className="DesLeft">
      <div className="desLeftLeft">
        <p onClick={() => handleTabClick("tab1")}><i className="iconfont icon-shangchuan"></i><span>上传</span></p>
        <p onClick={() => handleTabClick("tab2")}><i className="iconfont icon-mobanguanli"></i><span>模版</span></p>
        <p onClick={() => handleTabClick("tab3")}><i className="iconfont icon-sucaizhongxin"></i><span>素材</span></p>
        <p onClick={() => handleTabClick("tab4")}><i className="iconfont icon-wenzi"></i><span>文字</span></p>
        <p onClick={() => handleTabClick("tab5")}><i className="iconfont icon-tupian"></i><span>图片</span></p>
        <p onClick={() => handleTabClick("tab6")}><i className="iconfont icon-beijing"></i><span>背景</span></p>
        <p onClick={() => handleTabClick("tab7")}><i className="iconfont icon-zujian"></i><span>组件</span></p>
        <p onClick={() => handleTabClick("tab8")}><i className="iconfont icon-AIrenzhijiaoyupingtai_aigongjuji"></i><span>Ai工具</span></p>
      </div>
        <div className={`container ${isExpanded ? 'expanded' : ''}`}>
      
      <div className={`sidebar ${isExpanded ? 'show' : ''}`}>
        {activeTab === "tab1" && (
          <div>
            <Upload></Upload>
          </div>
        )}
        {activeTab === "tab2" && (
          <div>
            <Templateac></Templateac>
          </div>
        )}
        {activeTab === "tab3" && (
          <div>
            <SourceMaterial></SourceMaterial>
          </div>
        )}
        {activeTab === "tab4" && (
          <div>
            <WrittenWords></WrittenWords>
          </div>
        )}
        {activeTab === "tab5" && (
          <div>
            <TabImage></TabImage>
          </div>
        )}
        {activeTab === "tab6" && (
          <div>
            <TabBackground></TabBackground>
          </div>
        )}
        {activeTab === "tab7" && (
          <div>
            <Assembly></Assembly>
          </div>
        )}
        {activeTab === "tab8" && (
          <div>
            <AiTool></AiTool>
          </div>
        )}
        <button onClick={toggleExpand} className="toggle-button">
        {isExpanded ? <LeftOutlined /> : <RightOutlined />}
      </button>
      </div>
    </div>
      </div>
  );
};

export default Index;
